import { Modal } from 'antd';
import React, { useEffect } from 'react';
import ReactPlayer from 'react-player';

const PlayModel: React.FC = (props) => {
  // 模态窗状态
  const [visible, setVisible] = React.useState(false);
  const [url, setUrl] = React.useState('');
  useEffect(() => {
    setUrl(props.url);
    setVisible(props.url.length > 0);
  }, [props.url]);
  const [confirmLoading, setConfirmLoading] = React.useState(false);

  // 模态窗操作
  const handleOk = async () => {
    props.onSubmit();
  };
  const handleCancel = () => {
    props.onCancel();
  };

  return (
    <Modal
      mask={true}
      maskClosable={false}
      destroyOnClose={true}
      visible={visible}
      onOk={handleOk}
      confirmLoading={confirmLoading}
      onCancel={handleCancel}
    >
      <ReactPlayer
        className="react-player"
        //这里是由上级页面传过来的视频地址
        url={url}
        playing
        width="100%"
        controls
        config={{
          file: {
            forceHLS: true,
          },
        }}
      />
    </Modal>
  );
};

export default PlayModel;
